<template>
  <div class="mt20">
    <el-tabs type="border-card">
      <el-tab-pane label="手游">
        <!-- 手游数据-->
        <el-card class="box-card mt20" :body-style="{ padding: '18px 0px 5px', boxSizing: 'border-box' }">
          <el-row class="title">
            <el-col :lg="2" class="tac module-title ml20">
              <el-input placeholder="研发公司名称" @input="searchCompany" v-model.trim="queryCompanyInfo.name" clearable></el-input>
            </el-col>
            <el-col :lg="2" class="tac module-title ml20">
              <el-input placeholder="研发电话" @input="searchCompany" v-model.trim="queryCompanyInfo.phone" clearable></el-input>
            </el-col>
            <el-col :lg="2" class="tac module-title ml20">
              <el-input placeholder="研发QQ" @input="searchCompany" v-model.trim="queryCompanyInfo.qq" clearable></el-input>
            </el-col>
            <el-col :lg="3" class="tal module-title ml20">
              <!-- <el-button plain type="primary">查询</el-button> -->
              <el-button plain type="primary" @click="reset">重置</el-button>
            </el-col>
            <el-col :lg="13" class="tar module-title">
              <el-button plain type="primary" @click="newCompany()">添加CP</el-button>
              <el-button plain type="primary" @click="downloadExcel(false)" :loading="downloadLoading1">导出当前页</el-button>
              <el-button plain type="primary" @click="downloadExcel(true)" :loading="downloadLoading2">导出所有页</el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" :height="tableHeight" v-loading="tableLoading">
            <el-table-column label="序号" type="index" width="200"> </el-table-column>
            <el-table-column prop="name" label="研发公司全称"> </el-table-column>
            <el-table-column prop="phone" label="联系电话"> </el-table-column>
            <el-table-column prop="qq" label="联系QQ"> </el-table-column>
            <el-table-column prop="site" label="主页地址"> </el-table-column>
            <el-table-column prop="description" label="备注">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.description === '0' ? '' : scope.row.description }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button @click="editItem(scope.row)">编辑</el-button>
                <el-button @click="deleteItem(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="tac"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.perPages"
            layout="sizes, prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="页游"></el-tab-pane>
    </el-tabs>
    <!-- 添加CP -->
    <el-dialog :title="editFlag ? '编辑CP' : '添加CP'" width="1000px" :visible.sync="newCompanyDialg" :modal-append-to-body="false" @close="closeDialog">
      <el-form class="wid-100" inline label-position="right" label-width="300px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="研发公司全称：">
              <el-input v-model.trim="newCP.name" style="width: 400px" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系电话：">
              <el-input v-model.trim.number="newCP.phone" style="width: 400px" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系QQ：">
              <el-input v-model.trim="newCP.qq" style="width: 400px" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="主页地址：">
              <el-input v-model.trim="newCP.site" style="width: 400px" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input v-model.trim="newCP.description" style="width: 400px" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="passCancel">取 消</el-button>
        <el-button type="primary" @click="passConfirm" size="small" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      downloadLoading1: false,
      downloadLoading2: false,
      tableLoading: false,
      btnLoading: false,
      newCompanyDialg: false, // 新建/编辑 弹窗
      editFlag: false, // 编辑
      // 新建CP
      newCP: {
        name: '', // 名字
        phone: '', // 电话
        qq: '', // qq
        site: '', // 网站
        description: '', // 备注
      },
      tempNewCP: {}, // 暂存空cp
      // 表格数据
      tableData: [], // 数据
      // 分页
      pagination: {
        total: 0, // 表格数据条数
        pages: 0, // 总页数
        perPages: 10, // 每页的数量
        currentPage: 1, // 当前页
      },
      // 查询
      queryCompanyInfo: {
        name: '',
        phone: '',
        qq: '',
        id: '', // ID
        page: 1, // 第一页默认第一(非必填)
        per_page: 10, // 每页数量默认10(非必填)
      },
    };
  },
  created() {
    this.getWyState();
    this.tempNewCP = this.newCP;
    this.getCurrentScreen();
  },
  mounted() {},
  methods: {
    // 查询
    searchCompany(v) {
      this.queryCompanyInfo.page = 1;
      this.getWyState(this.queryCompanyInfo);
    },
    // 每页数量变化
    handleSizeChange(val) {
      this.queryCompanyInfo.per_page = val;
      this.getWyState(this.queryCompanyInfo);
    },
    // 当前页
    handleCurrentChange(val) {
      this.queryCompanyInfo.page = val;
      this.getWyState(this.queryCompanyInfo);
    },
    // 获取数据
    getWyState(parmas) {
      return new Promise(resolve => {
        this.tableLoading = true;
        let queryObj = parmas || this.queryCompanyInfo;
        this.$api.getCompanyList(queryObj).then(res => {
          this.tableLoading = false;
          if (res.code == 0 || res.code == 200) {
            this.tableData = res.items;
            this.pagination.currentPage = res.page;
            this.pagination.pages = res.pages;
            this.pagination.total = res.total;
            this.pagination.perPages = res.per_page;
            resolve(res.items);
          }
        });
      });
    },
    // 重置
    reset() {
      this.queryCompanyInfo.id = '';
      this.queryCompanyInfo.page = 1;
      this.queryCompanyInfo.per_page = 10;
      this.pagination.currentPage = 1;
      this.pagination.perPages = 10;
      this.getWyState(this.queryCompanyInfo);
    },
    editItem(r) {
      this.newCP = r;
      this.newCompanyDialg = true;
      this.editFlag = true;
    },
    // 添加CP
    newCompany() {
      this.newCompanyDialg = true;
      this.editFlag = false;
      this.newCP = this.tempNewCP;
    },
    // 删除
    deleteItem(r) {
      this.$confirm('此操作将删除该研发公司信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.deleteCompany({ id: r.id }).then(res => {
            if (res.code == 0 || res.code == 200) {
              this.getWyState();
              this.$message.success('删除成功!');
            } else {
              this.$message.warning(res.message);
            }
          });
        })
        .catch(() => {
          this.$message.info('已取消删除!');
        });
    },
    // 确认
    passConfirm() {
      // 1、检查内容齐全
      // 2、删除不必要的字段
      // 3、通过之后清空，取消的时候保存输入信息
      if (!this.checkInfo()) return;
      this.btnLoading = true;
      if (!this.editFlag) {
        this.$api.newCompany(this.newCP).then(res => {
          this.btnLoading = false;
          if (res.code == 0 || res.code == 200) {
            this.$message.success(`新建CP成功`);
            this.initNewCP();
            this.getWyState();
            this.newCompanyDialg = false;
          }
        });
      } else {
        this.$api.editCompany(this.newCP).then(res => {
          this.btnLoading = false;
          if (res.code == 0 || res.code == 200) {
            this.$message.success('编辑成功');
            this.getWyState();
            this.newCompanyDialg = false;
            this.initNewCP();
          }
        });
      }
    },
    // 取消
    passCancel() {
      this.newCompanyDialg = false;
    },
    // 检查内容
    checkInfo() {
      if (!this.newCP.name) {
        this.$message.warning('请输入研发公司名称');
        return false;
      }
      if (!this.newCP.phone) {
        this.$message.warning('请输入研发公司手机号');
        return false;
      }
      if (!this.newCP.qq) {
        this.$message.warning('请输入研发公司QQ号');
        return false;
      }
      return true;
    },
    initNewCP() {
      this.newCP.name = '';
      this.newCP.phone = '';
      this.newCP.qq = '';
      this.newCP.site = '';
      this.newCP.description = '';
    },
    closeDialog() {
      if (this.editFlag) {
        this.initNewCompany();
        this.getWyState();
      }
    },
    initNewCompany() {
      this.newCP = {
        name: '', // 名字
        phone: '', // 电话
        site: '', // 网站
        qq: '', // qq
        description: '', // 备注
      };
    },
    // 下载excel
    async downloadExcel(flage) {
      let excel = '<table>';
      //设置表头
      let list;
      if (!flage) {
        // 当前页
        this.downloadLoading1 = true;
        list = this.tableData;
      } else {
        // 所有页
        this.downloadLoading2 = true;
        this.queryCompanyInfo.page = 1;
        this.queryCompanyInfo.per_page = 9999;
        list = await this.getWyState(this.queryCompanyInfo);
      }
      let row = '<tr>' + '<td>序号</td>' + '<td>研发公司全称</td>' + '<td>联系电话</td>' + '<td>联系QQ</td>' + '<td>主页地址</td>' + '<td>备注</td>' + '</tr>';
      //换行
      excel += row;
      let l = list.map((o, i) => {
        return `<tr><td>${i + 1}</td><td>${o.name}</td><td>${o.phone}</td><td>${o.qq}</td><td>${o.site}</td><td>${o.description}</td></tr>`;
      });

      excel += l.join('');
      excel += '</table>';
      //利用时间起文件名称
      var date = new Date();
      var fileName = '研发列表' + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + '号' + date.getHours() + '点' + date.getMinutes() + '分';
      this.tableToExcel(excel, fileName);
      this.downloadLoading1 = false;
      this.downloadLoading2 = false;
      this.reset();
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}
</style>
